<script setup>
import {  useRouter } from 'vue-router'
// import { Search} from '@element-plus/icons-vue'
// import { ref } from 'vue'
import SearchBox from './SearchBox.vue'
// const route = useRoute()
const router = useRouter()
const logoUrl = '/logo.png'
const navItems = [
  { name: '首页', path: '/home' },
  { name: '生鲜', path: '/fresh' },
  { name: '餐厨', path: '/kitchen' },
  { name: '电器', path: '/dining' },
  { name: '居家', path: '/essential' },
  { name: '洗护', path: '/clean' },
  { name: '孕婴', path: '/baby' },
  { name: '服饰', path: '/clothing' },
]

const handleNavClick = (path) => {
  router.push(path)
}
const handleSearchSelect = (item) => {
    // 根据商品分类跳转到对应页面
    router.push(`/${item.category}?product=${item.id}`)
}
// const input = ref('')
</script>

<template>
  <header class="header-container wrapper">
    <div class="logo">
      <router-link to="/home"><img :src="logoUrl" alt="小兔鲜儿" class="logo-image"></router-link>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <ul>
        <li v-for="item in navItems" :key="item.name">
          <router-link :to="item.path" @click="handleNavClick(item.path)">{{ item.name }}</router-link>
        </li>
      </ul>
    </div>
    <!-- 搜索 -->
     <!-- <div class="search">
      <el-input :prefix-icon="Search" size="large" style="width: 300px" placeholder="请输入内容" v-model="input" clearable></el-input>
     </div> -->
     <SearchBox @select="handleSearchSelect"></SearchBox>
  </header>
</template>
<style lang="scss" scoped>
.header-container{
  .logo {
    width: 200px;
    height: 88px;
    margin-right: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    .logo-image {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
  }
}
</style>
